<script>
import {usrLogin,usrRegister} from '../../api'
export default {
    name:'user',
    data(){
        return {
            show:false,
            type:'login',
            onCancel:null,
            closed:false,
            user:'',
            passwd:'',
            member:''
        }
    },
    watch: {
      closed(newVal) {
        if (newVal) {
          this.show = false;
        }
      }
    },
    methods:{
        handleAfterLeave(){
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },
        close() {
            this.closed = true;
            if (typeof this.onCancel === 'function') {
                this.onCancel(this);
            }
        },
        toggle(){
            this.type = this.type==='login'?'register':'login'
        },
        login(){
            if(this.type==='register'){
                //...register
                this.signFuc()
            }else if(this.type==='login'){
                this.logFuc()
            }
        },
        logFuc(){
            let data = {
                user:this.user,
                passwd:this.passwd
            }
            usrLogin(data).then(res=>{
                if(res.status === 200){
                    this.$add('Blgo',res.data)
                    this.close()
                }else{
                    alert(res.msg)
                }
            })
        },
        signFuc(){
            let data = {
                user:this.user,
                passwd:this.passwd,
                member:this.member
            }
            usrRegister(data).then(res=>{
                if(res.status === 200){
                    alert(res.msg)
                    this.type = 'login'
                }else{
                    alert(res.msg)
                }
            })
        }
    }
}
</script>
<template>
    <transition name="fade" @after-leave="handleAfterLeave">  
        <div class="user-login"
        v-show="show"
        >
            <div class="user-form">
                <h1>0231019</h1>
                <p><a @click="toggle()">{{type==='register'?'切换登录':'切换注册'}}</a></p>
                <input type="text" name="user" v-model="user">
                <input type="password" name="passwd" v-model="passwd">
                <input type="text" v-show="type==='register'" v-model="member">
                <div class="confirm">
                    <button @click='login'>{{type==='register'?'SIGN-IN':'LOGIN'}}</button>
                    
                    <button @click="close">CANCEL</button>
                </div>
            </div>
        </div>
    </transition>
</template>
<style lang="stylus" scoped>
.user-login 
    z-index 999 
    position fixed
    width 100% 
    height 100%
    top 0 
    left 0
    background-color rgba(230,194,38,0.0)
    animation bounce3 1s
    .user-form
        margin 200px auto 
        width 400px
        padding 45px 30px 30px
        background-color #fff
        box-shadow 0 1px 2px rgba(0,0,0,0.25)
.fade-enter-active,.fade-leave-active
    opacity 1
.fade-enter,.fade-leave-to
    animation bounce4 1s
@keyframes bounce3{
	0%{opacity:0;transform:translateX(2000px);}
	60%{opacity:1;transform:translateX(-30px);}
	80%{transform:translateX(10px);}
	100%{transform:translateX(0);}
}
@keyframes bounce4{
	0%{transform:translateX(0);}
	20%{transform:translateX(10px);}
	40%{opacity:1;transform:translateX(-30px);}
	100%{opacity:0;transform:translateX(2000px);}
}
</style>
